<template>
	<el-select
		v-model="selectVal"
		:multiple-limit="multipleLimit"
		:collapse-tags="collapseTags"
		:multiple="multiple"
		:popper-append-to-body="popperAppendToBody"
		:disabled="disabled"
		:placeholder="placeholder"
		:clearable="clearable"
		:size="size"
		@change="onChange"
		@visible-change="onVisibleChange"
	>
		<el-option v-for="item in optionList" :key="item[valueKeyName]" :label="item[labelKeyName]" :value="item[valueKeyName]">
			<div class="flex-start-center">
				<span class="item-gap" :style="{background: item.color ? item.color : '', width: item.color ? '5px' : '', height: item.color ? '5px' : '', display: 'inline-block', borderRadius: '50%'}"></span>
				<span>{{ item[labelKeyName] }}</span>
			</div>
		</el-option>
	</el-select>
</template>

<script>
    export default {
        name: 'JkSelect',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            popperAppendToBody: {
                type: Boolean,
                default: true
            },
            multiple: {
                type: Boolean,
                default: false
            },
            collapseTags: {
                type: Boolean,
                default: false
            },
            multipleLimit: {
                type: Number,
                default: 10
            },
            disabled: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: true
            },
            value: {
                type: [String, Number, Array],
                default: ''
            },
            valueKeyName: {
                type: String,
                default: 'id'
            },
            labelKeyName: {
                type: String,
                default: 'name'
            },
            size: {
                type: String,
                default: 'small'
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            validateEvent: {
                type: Boolean,
                default: true
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                selectVal: ''
            };
        },
        watch: {
            value: {
                handler(newVal) {
                    this.selectVal = newVal;
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('visible-change', e);
            },
            onClear() {
                this.$emit('clear', this.selectVal);
            },
            onChange() {
                this.$emit('change', this.selectVal);
                this.$emit('on-enter', this.selectVal);
            }
        }

    };
</script>
